<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>音频</title>
		<link rel="stylesheet" type="text/css" href="tool/css/font-awesome.css"/>
		<link rel="stylesheet" type="text/css" href="index.css"/>
		<script src="jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="data.js" type="text/javascript" charset="utf-8"></script>
		<script src="index.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="panel">
			<div class="header">
				<img src="imgae/logo.jpg" >
				<span>网易云音乐</span>
				<input id="input" type="text" />
				<i id="enter" class="fa fa-user-circle-o" aria-hidden="true" title="单击到登录界面"> 登录</i>
				<i id="bgc" class="fa fa-user-circle-o" aria-hidden="true" title="单击选择你喜欢的颜色"> 皮肤</i>
				<input id="color" type="color">
			</div>
			<div class="content">
				<div class="left">
					<div id="cover" class="">
						<img src="" >
					</div>
					<div id="comment">
						<i id="like" class="fa fa-heart" aria-hidden="true" title="添加到喜欢"> 喜欢</i>
						<i class="fa fa-folder" aria-hidden="true" title="点击收藏"> 收藏</i>
						<i class="fa fa-download" aria-hidden="true" title="下载到本地">下载</i>
						<i class="fa fa-share" aria-hidden="true" title="分享歌曲"> 分享</i>
						
					</div>
				</div>
				<div class="login">
					<div class="shut">X</div>
					<p class="p1">用户登录</p>
					<input id="user" type="text" placeholder="请输入用户名"><br>
					<input id="psw" type="password" placeholder="请输入用密码"><br>
					<input id="remember" type="checkbox"><span>记住密码</span><br>
					<button type="button" id="userEnter">登录</button>
				</div>
				<div class="right">
					<div class="lyricInformation">
						<p class="lyricSong"></p>
						<span class="same lyricAlbum"></span>
						<span class="same lyricSinger"></span>
						<span class="same lyricSource"></span>
					</div>
					<div class="lyricContent">
						<ul id="lyricUl">
							
						</ul>
					</div>
					<div class="playlist">
						<h5 class="h5">播放列表</h5><h5 class="oldh5 active">历史记录</h5>
						<h6>总共<span></span>首</h6>
						<ul class="ul"></ul>
					</div>
					<div class="historyPlay">
						<ul><!-- 当当前歌曲播放完成之后，将歌曲添加到历史记录里面 --></ul>
					</div>
				</div>
			</div>
			<div class="audioPlay">
				<audio id="myAudio" src="">当前浏览器不支持audio</audio>
				<i id="prevSong" class="fa fa-step-backward" aria-hidden="true" title="上一首"></i>
				<i id="playOrPause" class="fa fa-play" aria-hidden="true" title="播放"></i>
				<!-- <i class="fa fa-pause" aria-hidden="true"></i> -->
				<i id="nextSong" class="fa fa-step-forward" aria-hidden="true" title="下一首"></i>
				<span id="currenTime">0:00</span>
				<input id="progress" type="range" min="0" max="" value="0" step="0.1">
				<span id="duration">0:00</span>
				<i id="volume" class="fa fa-bell" aria-hidden="true"></i>
				<!-- <i class="fa fa-bell-slash" aria-hidden="true"></i> -->
				<input id="volumeInput" type="range" min="0" max="1" value="0.3" step="0.05">
				<i id="playMode" class="fa fa-list" aria-hidden="true" title="顺序播放"></i>
				<!-- <i class="fa fa-undo" aria-hidden="true"></i>
				<i class="fa fa-random" aria-hidden="true"></i> 
				<i class="fa fa-refresh" aria-hidden="true"></i> -->
				<i id="lyrics" class="fa fa-file-text" aria-hidden="true" title="点击显示桌面歌词"></i>
				<i id="playListButton" class="fa fa-align-justify" aria-hidden="true" title="显示当前播放列表"></i>
			</div>
			<div class="midst"></div>
		</div>
		<div class="boxWindowSonger">
			<ul class="boxWindow">
				<li></li>
			</ul>
		</div>
	</body>
</html>